<template>
  <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="$router.back()" placeholder fixed />

  <van-tabs v-model:active="active">
    <van-tab title="用户名注册">
      <!-- 用户名注册 -->
      <van-form @submit="registerFn()">
        <van-cell-group inset>
          <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="npassword" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 注册 </van-button>
        </div>
      </van-form>
    </van-tab>
    <van-tab title="手机号注册">
      <!-- 手机号注册 -->
      <van-form @submit="registerFn()">
        <van-cell-group inset>
          <van-field v-model="usertel" name="手机号" label="手机号" placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]" />
          <van-field v-model="tpassword" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 注册 </van-button>
        </div>
      </van-form>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { nameRegReq, telRegReq } from '@/api/user'
import { showDialog } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

let username = ref('')
let npassword = ref('')
let usertel = ref('')
let tpassword = ref('')
let active = ref(0)
let router = useRouter()
async function registerFn() {
  let code = ''
  let message = ''
  if (active.value == 0) {
    let res = await nameRegReq(username.value, npassword.value)
    code = res.data.code
    message = res.data.message
  } else {
    let res = await telRegReq(usertel.value, tpassword.value)
    code = res.data.code
    message = res.data.message
  }
  showDialog({
    title: '提示',
    message: message,
  }).then(() => {
    // on close
  })
  if (code == 200) {
    router.push('/login')
  }
}
</script>

<style></style>
